<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-17 10:48:24
 * @LastEditors: 赵天利 5450026+zhaotianli01@user.noreply.gitee.com
 * @LastEditTime: 2024-01-29 16:25:04
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\fireFighting\productionInput\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="common-details">
    <customDetailsTopbar :title="title" flag @back="back" />
    <div class="d-scroll listInner px-1 bg-white">
      <div class="py-1 px-1 productionInputDetail">
        <div class="baseLoad">
          <div v-for="(item, index) in descList" :key="index">
            <div>
              <custom-details-item :icon="item.icon" :label="item.label" :value="item.value + ''" :label-style="{'width': '40px'}">
                <template #valueSlot>
                  <span v-if="!item.isFile">{{ item.value }}</span>
                  <div v-else>
                    <template v-if="item.value && item.value.length>0">
                      <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
                    <!--                    <div v-for="file in item.value" :key="file.fileId">-->
                    <!--                      <el-link type="primary" class="desContent" @click="handleDownLoad(file.fileUrl)">-->
                    <!--                        {{ file.fileName }}-->
                    <!--                      </el-link>-->
                    <!--                    </div>-->
                    </template>
                  </div>
                </template>
              </custom-details-item>
            </div>
          </div>
        </div>
      </div>
      <div>
        <custom-title :is-line="true" title="月度投入费用使用情况" />
        <div id="searchContent" style="display: flex;justify-content: space-between">
          <custom-dayjs-timer change-load select-value="近一月" :start.sync="formInline.startTime" :end.sync="formInline.endTime" @change="getCostLedgerList" />
          <!--                    <div style="width: 29%;vertical-align: middle;height: 28px;" @click="showPicker = true">-->
          <!--                      <el-input suffix-icon="el-icon-caret-bottom" :value="timeSet" readonly size="mini" />-->
          <!--                    </div>-->
          <!--                    <div style="vertical-align: middle;width: 69%;height: 28px;">-->
          <!--                      <custom-timer type="date" :start.sync="formInline.startTime" :end.sync="formInline.endTime" title="" style="margin-bottom: 0" @change="getCostLedgerList" />-->
          <!--                    </div>-->
        </div>
        <div class="common_list baseLoad1">
          <div v-if="listData && listData.length>0">
            <div v-for="(item, index) in listData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.month }}
                  </div>
                  <ul>
                    <li v-for="(desc,ind) in tableDescList" :key="desc.field">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="desc.icon" />
                      <div class="label">{{ desc.label }}：</div>
                      <div class="value">
                        <span v-if="!desc.isFile">{{ item[desc.field] }}</span>
                        <template v-else>
                          <div>
                            <el-link type="primary" @click="openAttachPopUp(item[desc.field])">查看</el-link>
                            <!--                            <div v-for="file in item[desc.field]" :key="file.fileUrl">-->
                            <!--                              <el-link type="primary" @click="handleDownLoad(file.fileUrl)">{{ file.fileName }}</el-link>-->
                            <!--                            </div>-->
                          </div>
                        </template>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <el-empty v-else />
        </div>
      </div>
    </div>
    <attach-pop-up ref="attachPopUp" />
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { getCostLedgerList } from '@/api/fireFighting'
// import { currentTime } from '@/utils/dayJs'
export default {
  mixins: [commonList],
  data() {
    return {
      descListMap: {
        '消防生产投入计划': [
          { label: '企业名称', fieldName: 'companyName', value: '', icon: '&#xe790;' },
          { label: '所属年份', fieldName: 'years', value: '', icon: '&#xe61b;' },
          { label: '上年度生产收入（万元）', fieldName: 'lastIncome', value: '', icon: '&#xe69a;' },
          { label: '上年度结余（万元）', fieldName: 'lastSurplus', value: '', icon: '&#xe69a;' },
          { label: '本年度计提金额（万元）', fieldName: 'currentAmount', value: '', icon: '&#xe670;' },
          { label: '本年度实际提取金额（万元）', fieldName: 'currentActualAmount', value: '', icon: '&#xe64d;' },
          { label: '本年度实际支出金额（万元）', fieldName: 'costCount', value: '', icon: '&#xe685;' },
          { label: '实际支出占实际提取金额比例（%）', fieldName: 'amountActualCompleRate', uuid: '', value: '', icon: '&#xe677;' },
          { label: '实际支出占计提金额比例（%）', fieldName: 'amountCompleRate', uuid: '', value: '', icon: '&#xe677;' },
          { label: '本年度结余（万元）', fieldName: 'currentSurplus', uuid: '', value: '', icon: '&#xe677;' }
          // { label: '附件', isFile: true, fieldName: 'shareAttachVos', uuid: '', value: '', icon: '&#xe677;' }
        ],
        '消防费用使用台账': [
          { label: '企业名称', fieldName: 'companyName', value: '', icon: '&#xe790;' },
          { label: '年份', fieldName: 'years', value: '', icon: '&#xe8d5;' },
          { label: '项目', fieldName: 'projects', value: '', icon: '&#xe62c;' },
          { label: '明细', fieldName: 'details', value: '', icon: '&#xe6b6;' },
          { label: '投入类型', fieldName: 'costType', value: '', icon: '&#xe6b6;' },
          { label: '支出金额（元）', fieldName: 'payAmount', value: '', icon: '&#xe670;' },
          { label: '支出凭证', fieldName: 'supportName', value: '', icon: '&#xe677;' },
          { label: '上报时间', fieldName: 'reportTime', value: '', icon: '&#xe685;' }
        ]
      },
      descList: [],
      showPicker: false,
      formInline: {
        // startTime: currentTime('年') + '-01-01',
        // endTime: currentTime('年月日')
        startTime: '',
        endTime: ''
      },
      timeSet: '自定义',
      title: '',
      titleMap: {
        '消防生产投入计划': '投入计划详情',
        '消防费用使用台账': '使用台账详情'
      },
      current: '',
      companyName: '',
      tag: '',
      listData: [],
      tableDescList: [
        { label: '所属年份', field: 'years', icon: '&#xe61b;' },
        { label: '企业名称', field: 'companyName', icon: '&#xe790;' },
        { label: '投入类型', field: 'costType', icon: '&#xe634;' },
        { label: '费用说明', field: 'details', icon: '&#xe62c;' },
        { label: '支出金额（万元）', field: 'payAmount', icon: '&#xe69a;' },
        { label: '投入时间', field: 'reportTime', icon: '&#xe69a;' },
        { label: '支出凭证', field: 'shareAttachVos', icon: '&#xe677;', isFile: true }
      ]
    }
  },
  mounted() {
    const { current, tag, companyName } = this.$route.query
    this.current = current || ''
    this.tag = tag || ''
    this.companyName = companyName
    this.descList = this.descListMap[tag]
    this.title = this.titleMap[tag]
    this.getList()
    // this.getCostLedgerList()
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/productionInput',
        query: { current: this.current, checkedTag: this.tag }
      })
    },
    // 获取详情
    async getList() {
      this.layout.showAreaLoading(['.baseLoad'])
      const data = this.$route.query
      if (data) {
        this.descList.forEach((v) => {
          v.value = data[v.fieldName] !== '' ? data[v.fieldName] : '/'
        })
      }
      this.layout.hideAreaLoading(['.baseLoad'])
    },
    async getCostLedgerList() {
      this.listData = []
      // this.layout.showLoading()
      this.layout.showAreaLoading(['.baseLoad1'])
      const { data, status } = await getCostLedgerList({
        ...this.formInline,
        companyId: this.$route.query.companyId
      })
      if (data && status === 0) {
        this.listData = data.list
      }
      // this.layout.hideLoading()
      this.layout.hideAreaLoading(['.baseLoad1'])
    }
  }
}
</script>

<style lang="scss" scoped>
.productionInputDetail ::v-deep .detailItem{
  align-items: center;
}
</style>
<style>
#searchContent .customTimer .timer-title{
  margin: 0;
}
</style>
